<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-white">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 h-22 bg-[#FFF] z-50">
      <div class="container mx-auto px-60 h-full flex items-center justify-between">
        <div class="text-white text-2xl font-bold">
          <img src="https://redbull-prd.oss-cn-beijing.aliyuncs.com/images/xlcfn1dk.png" alt="Logo" class="h-12" />
        </div>
        <div class="flex space-x-14">
          <a v-for="(item, index) in navItems" :key="index"
            class="text-block hover:border-b-4 border-[#b11726] transition-all duration-300 text-lg font-medium py-2">
            {{ item }}
          </a>
        </div>
      </div>
    </nav>
    <div class="pt-22">
      <swiper :modules="swiperModules" :slides-per-view="1" :loop="true" :autoplay="{
        delay: 5000,
        disableOnInteraction: false,
      }" :pagination="{ clickable: true }" class="h-[calc(100vh-4rem)]">
        <swiper-slide v-for="(slide, index) in heroSlides" :key="index">
          <div class="relative w-full h-full">
            <img src="https://ai-public.mastergo.com/ai/img_res/45babcdebd7b000fea69423abaa13901.jpg" alt="公司简介"
              class="w-full rounded-lg shadow-xl" />
            <div class="absolute inset-0 flex items-center justify-center z-50">
              <div class="text-center text-white">
                <h2 class="text-4xl font-bold mb-4">
                  {{ slide.title }}
                </h2>
                <p class="text-xl">{{ slide.description }}</p>
              </div>
            </div>
            <div class="absolute inset-0 bg-black opacity-20 flex items-center justify-center"></div>
          </div>
        </swiper-slide>
      </swiper>
    </div>

    <!-- 公司简介 -->
    <section class="py-20 relative overflow-hidden">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-2 gap-12 items-center">
          <div class="relative">
            <h2 class="text-4xl font-bold text-gray-800 mb-6">关于我们</h2>
            <div class="h-1 w-20 bg-[#CF0A2C] mb-8"></div>
            <p class="text-gray-600 leading-relaxed">
              赣州旅投集团成立于2010年，前身为赣州客家旅游集团，是市级旅游产业及绿色生态产业发展的国有融资、投资、建设、运营平台，主营业务涵盖景区、酒店、民宿、旅行社、旅游客运、水上观光、林业等。集团注册资本5亿元，员工900余人。截至2022年底，集团资产总额达413.11亿元。
              “十三五”期间，赣州旅投集团围绕全市旅游发展布局和集团“双百”战略，积极推进了方特东方欲晓主题公园、阳明湖旅游度假区（含民宿小镇）、章江宾馆、电影《八子》等项目。目前，正在推进建设于都“长征第一渡”红色文旅演艺项目、章江宾馆二期、赣州方特二期、龙南围屋民宿小镇、央视动漫、冰雪文旅等重大文旅项目。
              赣州旅投集团将党建提升到固本行远的战略高度，打造党建核心竞争力，扎实推进基层党建“三化”建设，开展了“一企业一特色、一支部一品牌”创建工程，推动党建工作与生产经营深度融合、同频共振、互促共进。同时，强化党员“苦学、苦干、苦炼”，锤炼党员作风筋骨，凝聚党员中坚力量，爬坡过坎、奋勇拼搏，全面提升党组织创造力、凝聚力、战斗力。
              “十四五”，赣州旅投集团将坚持高质量、跨越式发展，全面实施“千亿”
              新战略，争当全市红色旅游发展排头兵和全市旅游产业发展主力军。
            </p>
          </div>
          <div class="relative">
            <img src="https://ai-public.mastergo.com/ai/img_res/1ba058e58626e0d733c04484cb9942c4.jpg" alt="公司简介"
              class="w-full rounded-lg shadow-xl" />
          </div>
        </div>
      </div>
    </section>

    <!-- 新闻中心 -->
    <section class="py-16 bg-gray-50">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">新闻中心</h2>
        <div class="grid grid-cols-3 gap-8">
          <div v-for="(news, index) in newsItems" :key="index"
            class="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:-translate-y-2">
            <img :src="news.image" :alt="news.title" class="w-full h-48 object-cover" />
            <div class="p-6">
              <h3 class="text-xl font-semibold mb-2">{{ news.title }}</h3>
              <p class="text-gray-600 mb-4">{{ news.description }}</p>
              <div class="flex justify-between items-center text-sm text-gray-500">
                <span>{{ news.date }}</span>
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 公告区域 -->
    <section class="py-16">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-2 gap-8">
          <!-- 招标公告 -->
          <div>
            <h2 class="text-2xl font-bold mb-6 flex items-center">
              <span class="h-6 w-1 bg-[#CF0A2C] mr-3"></span>
              招标公告
            </h2>
            <div class="space-y-4">
              <div v-for="(item, index) in tenderNotices" :key="index"
                class="flex justify-between items-center p-4 bg-gray-50 rounded hover:bg-gray-100 transition-colors duration-300">
                <span class="text-gray-700">{{ item.title }}</span>
                <span class="text-gray-500 text-sm">{{ item.date }}</span>
              </div>
            </div>
          </div>
          <!-- 建投公告 -->
          <div>
            <h2 class="text-2xl font-bold mb-6 flex items-center">
              <span class="h-6 w-1 bg-[#CF0A2C] mr-3"></span>
              结果公告
            </h2>
            <div class="space-y-4">
              <div v-for="(item, index) in constructionNotices" :key="index"
                class="flex justify-between items-center p-4 bg-gray-50 rounded hover:bg-gray-100 transition-colors duration-300">
                <span class="text-gray-700">{{ item.title }}</span>
                <span class="text-gray-500 text-sm">{{ item.date }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 项目风采 -->
    <section class="py-16 bg-gray-50">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">项目风采</h2>
        <swiper :modules="swiperModules" :slides-per-view="3" :space-between="30" :loop="true" :autoplay="{
          delay: 3000,
          disableOnInteraction: false,
        }" class="project-swiper">
          <swiper-slide v-for="(project, index) in projects" :key="index">
            <div class="bg-white rounded-lg overflow-hidden shadow-md">
              <img :src="project.image" :alt="project.title" class="w-full h-48 object-cover" />
              <div class="p-4">
                <h3 class="text-lg font-semibold mb-2">{{ project.title }}</h3>
                <p class="text-gray-600 text-sm">{{ project.description }}</p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-[#b11726] text-white pt-16 pb-8">
      <div class="container mx-auto px-4 flex justify-center items-center">
        <div class="grid grid-cols-3 gap-8 mb-12">
          <div>
            <h3 class="text-xl font-bold mb-4 w-32">快速链接</h3>
            <ul class="space-y-2 justify-between flex-wrap flex-row flex w-58">
              <li v-for="(item, index) in navItems" class="w-24" :key="index">
                <a href="#" class="text-gray-300 hover:text-white text-sm">{{
                  item
                  }}</a>
              </li>
            </ul>
          </div>
          <div>
            <h3 class="text-xl font-bold mb-4">联系方式</h3>
            <ul class="space-y-2 text-sm text-gray-300">
              <li>来信请寄:赣州旅游投资集团有限公司纪检监察室;</li>
              <li>来访请到:赣州市章贡区赣江源大道15号6楼621室;</li>
              <li>地址:赣州市章贡区赣江源大道15号6楼621室;</li>
              <li>邮编:341000</li>
              <li>举报电话:0797-5550580</li>
              <li>举报邮箱:gzltjjjcb@163.com</li>
            </ul>
          </div>
          <div class="flex justify-start items-center flex-col">
            <h3 class="text-xl font-bold mb-4">关注我们</h3>
            <div class="flex space-x-4">
              <img src="https://redbull-prd.oss-cn-beijing.aliyuncs.com/images/zxqs5kom.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="border-t border-red-800 pt-8 text-center text-sm text-gray-300">
        <p>© 2025 赣州旅投集团</p>
        <p class="mt-2">赣ICP备19014683号-1</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { Pagination, Autoplay } from 'swiper/modules';

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';


const swiperModules = [Pagination, Autoplay];

const navItems = [
  "首页",
  "关于我们",
  "新闻中心",
  "企业文化",
  "人力资源",
  "招标采购",
];

const heroSlides = [
  {
    image:
      "https://ai-public.mastergo.com/ai/img_res/45babcdebd7b000fea69423abaa13901.jpg",
    title: "创新建设 引领未来",
    description: "打造精品工程，建设美好城市",
  },
  {
    image:
      "https://ai-public.mastergo.com/ai/img_res/60d74742adc303a387e0281d60583bd9.jpg",
    title: "绿色发展 永续经营",
    description: "践行环保理念，实现可持续发展",
  },
  {
    image:
      "https://ai-public.mastergo.com/ai/img_res/71b5b19c52d0d41a38b663d517a8f4e9.jpg",
    title: "智慧城市 科技赋能",
    description: "运用现代科技，构建智慧城市",
  },
];

const newsItems = [
  {
    image:
      "https://ai-public.mastergo.com/ai/img_res/e15577ccfc29cf991f90687e438b8407.jpg",
    title: "赣州旅投集团党委召开2024年度党员领导干部民主生活会",
    description:
      "2月24日，赣州旅投集团党委召开2024年度党员领导干部民主生活会。市国资委二级调研员王全生和企业指导改革科负责人到会指导，集团党委书记...",
    date: "2024-01-15",
  },
  {
    image:
      "https://ai-public.mastergo.com/ai/img_res/0257719fd312239a6a1699dac023e9b1.jpg",
    title: "赣州旅投集团召开2025年干部职工大会",
    description:
      "2月23日，赣州旅投集团召开2025年干部职工大会。市国资委党委委员、副主任夏菁蔚，集团党委书记、董事长许志辉，集团党委副书记、总经理...",
    date: "2024-01-10",
  },
  {
    image:
      "https://ai-public.mastergo.com/ai/img_res/ac5ec778e3410a31f594ae06e33f8d86.jpg",
    title: "客家文化生态保护区LOGO及标识标牌设计征集专家评审会顺利举行",
    description:
      "为深入推进客家文化（赣南）生态保护区建设与客家文化传播，充分展现赣南客家文化的独特魅力，2月23日，由赣州市文化广电旅游局主办、赣州...",
    date: "2024-01-05",
  },
];

const tenderNotices = [
  {
    title: "赣州旅投建设集团有限公司选取2025年度造价咨询服务单位询价采购公告",
    date: "2024-01-20",
  },
  {
    title: "赣州旅投饮品有限责任公司“景云”饮用水经销商公开征集公告",
    date: "2024-01-18",
  },
  {
    title: "赣州旅投饮品有限责任公司“景云”饮用水配送商公开遴选公告",
    date: "2024-01-15",
  },
  {
    title: "江南宋城历史文化旅游区提升改造（一期）一标段施工图审查服务采购公告",
    date: "2024-01-12",
  },
];

const constructionNotices = [
  {
    title:
      "赣市旅投字〔2024〕43号-关于印发《赣州旅游投资集团关于进一步规范非工程类货...",
    date: "2024-01-19",
  },
  {
    title: "赣市旅投字〔2023〕24号赣州旅游投资集团招标及采购负面行为清单",
    date: "2024-01-17",
  },
  {
    title:
      "赣市旅投字〔2023〕23号赣州旅游投资集团工程建设项目非招标采购管理办法（试行...",
    date: "2024-01-14",
  },
  { title: "工程建设标准化管理制度", date: "2024-01-11" },
];

const projects = [
  {
    image:
      "https://ai-public.mastergo.com/ai/img_res/a69d0374e4f7ee044be2b64eff9a857a.jpg",
    title: "城市商务中心项目",
    description: "总建筑面积10万平方米的现代化商务中心",
  },
  {
    image:
      "https://ai-public.mastergo.com/ai/img_res/9838f33b20467454005c53a7fb7e2112.jpg",
    title: "跨江大桥工程",
    description: "全长2.5公里的现代化跨江大桥",
  },
  {
    image:
      "https://ai-public.mastergo.com/ai/img_res/d0f6dafd0b81a9b5873749ad9abb7cfd.jpg",
    title: "生态住宅小区",
    description: "融合生态理念的高品质住宅项目",
  },
  {
    image:
      "https://ai-public.mastergo.com/ai/img_res/933f9e34ae5c11703d97df0120c61c42.jpg",
    title: "地铁站点工程",
    description: "智能化地铁站点建设项目",
  },
];
</script>

<style>
.project-swiper {
  padding: 20px 0;
}

.swiper-pagination-bullet {
  background: #cf0a2c;
}

.swiper-pagination-bullet-active {
  background: #8b0016;
}
</style>
